<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 300px;
        height: 300px;
        background-color: cyan;
      }
      .center {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="center">
        <div class="inner"></div>
      </div>
    </div>
    <script>
      var outerEle = document.querySelector(".outer");
      var centerEle = document.querySelector(".center");
      var innerEle = document.querySelector(".inner");

      //0级事件: 默认是从小到大触发事件: 事件的冒泡,默认就是在冒泡阶段触发事件
      // outerEle.onclick = function () {
      //   console.log("outer");
      // };
      // centerEle.onclick = function () {
      //   console.log("center");
      // };
      // innerEle.onclick = function (e) {
      //   console.log("inner", e);
      // };

      //事件由大到小触发称为 :  事件捕获

      //事件的出发 会经历3个过程: 先捕获阶段 ===>目标元素 e.target ===> 冒泡阶段

      //二级事件的事件流 : 默认是冒泡阶段触发
      //可以on过第三个参数 来控制顺序 默认是false   冒泡触发事件
      //捕获阶段触发事件可以把参数改成true

      window.addEventListener(
        "click",
        function (e) {
          console.log("window");
          // console.log(e);
        },
        true
      );
      document.addEventListener(
        "click",
        function () {
          console.log("document");
        },
        true
      );
      document.documentElement.addEventListener("click", function () {
        console.log("html");
      });
      document.body.addEventListener("click", function () {
        console.log("body");
      });
      document.querySelector(".outer").addEventListener(
        "click",
        function () {
          console.log("outer");
        },
        true
      );
      document.querySelector(".center").addEventListener(
        "click",
        function () {
          console.log("center");
        },
        true
      );
      document.querySelector(".inner").addEventListener(
        "click",
        function (e) {
          console.log("inner");
        },
        true
      );
    </script>
  </body>
</html>
